<template>
	<view class="page mine-info">
		<!-- #ifdef APP-PLUS -->
		<view v-if="showNotice">
			<topNotice message="用于上传图片作为头像信息的展示" v-if="showNotice" title="媒体权限使用说明"></topNotice>
		</view>
		<!-- #endif -->
		<nav-header title="账户信息" :showRight="false" bg-color="#FAFAFA" :show-border="false">
		</nav-header>
		<view class="content">
			<view class="content-item">
				<view class="item-left text-sm-Regular">头像</view>
				<view class="item-right">
					<view class="right-content">
						<image-upload :onSuccess="onUnloadImageSuccess" :on-before="onBefore"
							@permissionRequestComplete="handlePermissionImage">
							<image v-if="userInfo.headImageThumb" :src="userInfo.headImageThumb" class="head-image">
							</image>
							<svg-icon v-else icon="avatar-default" :width="80" style="border-radius: 15px;"></svg-icon>
						</image-upload>
						<!-- <head-image :name="userInfo.nickName" :url="userInfo.headImage" :size="80"></head-image> -->
					</view>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="content-item" @click="goPage('/pageSubOne/mine/mine-username')">
				<view class="item-left text-sm-Regular">手机号</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular">{{ userInfo.userName }}</text>
					</view>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="content-item" @click="goPage('/pageSubOne/mine/mine-nickname')">
				<view class="item-left text-sm-Regular">昵称</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular">{{ userInfo.nickName }}</text>
					</view>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="content-item" @click="goPage('/pageSubOne/mine/mine-sex')">
				<view class="item-left text-sm-Regular">性别</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular" v-if="userInfo.sex==0">男</text>
						<text class="text-sm-Regular" v-if="userInfo.sex==1">女</text>
					</view>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="content-item">
				<view class="item-left text-sm-Regular">友号</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular">{{ userInfo.userFriendId }}</text>
					</view>
					<!-- <image :src="getResource('/icon/copy.svg')" class="code" @click="copyText1"></image> -->
					<view @click="copyText1">
						<svg-icon icon="copy" :width="32"></svg-icon>
					</view>
				</view>
			</view>
			<view class="content-item">
				<view class="item-left text-sm-Regular">商号</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular">{{ userInfo.userBusinessId }}</text>
					</view>
					<!-- <image :src="getResource('/icon/copy.svg')" class="code" @click="copyText2"></image> -->
					<view @click="copyText1">
						<svg-icon icon="copy" :width="32"></svg-icon>
					</view>
				</view>
			</view>
			<view class="content-item" @tap.stop.native="goCodePage">
				<view class="item-left text-sm-Regular">二维码</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular">查看二维码</text>
					</view>
					<svg-icon icon="QR-code" :width="32"></svg-icon>
				</view>
			</view>
			<view class="content-item">
				<view class="item-left text-sm-Regular">故乡</view>
				<view class="item-right">
					<picker mode="multiSelector" @change="bindMultiPickerChange"
						@columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
						<view class="text-sm-Regular right-content" v-if="userInfo.hometown">
							{{ hometownReplace }}
						</view>
						<view class="text-sm-Regular right-content" v-else>
							<text class="text-sm-Regular">未设置</text>
						</view>
					</picker>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="content-item"  @click="goPage('/pageSubOne/mine/mine-career?type=school')">
				<view class="item-left text-sm-Regular">学校</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular">{{ userInfo.school }}</text>
					</view>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="content-item" @click="goPage('/pageSubOne/mine/mine-career?type=occupation')">
				<view class="item-left text-sm-Regular">行业</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular">{{ userInfo.occupation }}</text>
					</view>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
			<view class="signature" @click="goPage('/pageSubOne/mine/mine-signature')">
				<view class="signature-top">
					<view class="item-left text-sm-Regular">个性签名</view>
					<view class="item-right">
						<view class="right-content">
							<text class="text-sm-Regular" style="color: #2970FF;">去编辑</text>
						</view>
						<svg-icon icon="arrowRight" :width="32"></svg-icon>
					</view>
				</view>
				<view class="signature-bottom">
					<text class="text-sm-Regular">{{ userInfo.signature }}</text>
				</view>
			</view>
			<view class="content-item" @tap.stop.native="goPage(`/pageSubOne/mine/mine-share-user`)">
				<view class="item-left text-sm-Regular">我的邀请人</view>
				<view class="item-right">
					<view class="right-content">
						<text class="text-sm-Regular" v-if="myShareUser">{{myShareUser.nickName}}</text>
					</view>
					<svg-icon icon="arrowRight" :width="32"></svg-icon>
				</view>
			</view>
		</view>
		<up-popup :show="showCode" mode="center" round="8" @close="showCode=false">
			<code-popup :show="showCode" :share-data="share"
				:qr-url="`https://h5.dgyxy.com/pageSubOne/common/user-info?id=${userInfo.id}&chatIdx=null&sourceType=0&fromThis=false&from=true`"></code-popup>
		</up-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCode: false, //显示二维码弹出层
				show: false,
				multiArray: [
					[],
					[],
					[]
				],
				multiCode: [
					[]
				],
				share: { //分享好友
					title: '邀请你加入',
					path: '',
					imageUrl: 'https://file.dgyxy.com/resource/backgroud2.png',
					desc: '通过友星缘，添加我为好友吧',
					content: ''
				},
				multiIndex: [0, 0, 0],
				provinces: [],
				cities: [],
				areas: [],
				isShow: true,
				myShareUser: null,
				showNotice: null
			}
		},
		methods: {
			onBefore(f) {
				if (!this.funcMap) {
					uni.showLoading({
						title: "正在上传"
					})
					setTimeout(() => {
						uni.hideLoading()
						uni.showToast({
							title: "头像正在等待7天审核"
						})
					}, 2000)
					return false
				}
				uni.hideLoading()
				return true
			},
			onUnloadImageSuccess(file, res) {
				console.log(res);
				this.userInfo.headImage = res.data.originUrl;
				this.userInfo.headImageThumb = res.data.thumbUrl;
				this.$http({
					url: "/user/update",
					method: "PUT",
					data: this.userInfo
				}).then(() => {
					this.userStore.setUserInfo(this.userInfo);
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
				})
			},
			handlePermissionImage(show) {
				this.showNotice = show
			},
			onShowFullImage() {
				let imageUrl = this.userInfo.headImage;
				if (imageUrl) {
					uni.previewImage({
						urls: [imageUrl]
					})
				}
			},
			closeCode(show) {
				this.showCode = show
			},
			fetchProvinceData() { //省份
				return new Promise((resolve, reject) => { // 使用Promise处理异步
					this.$http({
						url: "/positionCode/province",
						method: "GET"
					}).then((data) => {
						this.provinces = data;
						this.multiArray[0] = data.map(item => item.name);
						resolve(data[0].code); // 将省份code作为Promise的结果返回
					}).catch(reject); // 处理请求错误
				});
			},

			fetchCityData(provinceId) { //城市
				return new Promise((resolve, reject) => {
					this.$http({
						url: `/positionCode/city/${provinceId}`,
						method: 'GET'
					}).then((data) => {
						this.cities = data;
						this.multiArray[1] = data.map(item => item.name);
						resolve(data[0].code); // 将城市code作为Promise的结果返回
					}).catch(reject);
				});
			},

			fetchAreaData(cityId) { //地区
				return new Promise((resolve, reject) => {
					this.$http({
						url: `/positionCode/area/${cityId}`,
						method: 'GET'
					}).then((data) => {
						this.areas = data;
						this.multiArray[2] = data.map(item => item.name);
						this.multiCode[0] = data.map(item => item.code)
						resolve(); // Area请求完成后resolve
					}).catch(reject);
				});
			},
			bindMultiPickerChange(e) { //点击完成后
				this.multiIndex = e.detail.value;
				console.log('当前选择:', this.multiArray[0][this.multiIndex[0]], this.multiArray[1][this.multiIndex[1]], this
					.multiArray[2][this.multiIndex[2]]);
				console.log(this.multiCode[0][this.multiIndex[2]])
				this.userInfo.hometownCode = this.multiCode[0][this.multiIndex[2]]
				this.$http({
					url: "/user/update",
					method: "PUT",
					data: this.userInfo
				}).then(() => {
					this.userStore.setUserInfo(this.userInfo);
					uni.showToast({
						title: "修改成功",
						icon: 'none'
					});
					this.userStore.loadUser()
				})
			},
			async bindMultiPickerColumnChange(e) { //选择省市区
				const column = e.detail.column;
				const value = e.detail.value;
				try {
					switch (column) {
						case 0:
							const cityCode = await this.fetchCityData(this.provinces[value].code); // 等待city数据
							await this.fetchAreaData(this.cities[0] ? this.cities[0].code :
								null); // 等待area数据, 处理城市为空的情况
							this.multiIndex = [value, 0, 0]; // 直接设置multiIndex
							break;
						case 1:
							await this.fetchAreaData(this.cities[value].code); // 等待area数据
							this.multiIndex = [this.multiIndex[0], value, 0]; // 直接设置multiIndex
							break;
						default:
							break;
					}
				} catch (error) {
					console.error("数据请求错误:", error);
					// 处理错误，例如显示错误提示
				}
			},
			goCodePage() {
				// uni.navigateTo({
				// 	url: "/pageSubOne/mine/mine-code"
				// })
				this.showCode = true
			},
			copyText1() {
				let text = this.userInfo.userFriendId

				uni.setClipboardData({
					data: text.toString(),
					success: function(res) {
						console.log('复制的信息1：', text);
						uni.showToast({
							title: '复制成功',
						});
					}
				});
			},
			copyText2() {

				let text = this.userInfo.userBusinessId

				uni.setClipboardData({
					data: text.toString(),
					success: function(res) {
						console.log('复制的信息2：', text);
						uni.showToast({
							title: '复制成功',
						});
					}
				});
			}
		},
		computed: {
			userInfo() {
				return this.userStore.userInfo;
			},
			hometownReplace() {
				// const formattedAddress = this.userInfo.hometown.replace(/省|市|区|镇|街道|村|社区|委员会/g, '$&-');
				// return formattedAddress.replace(/-$/, '');

				return this.userInfo.hometown
					// ✅ 核心修复：使用更精准的负向断言
					.replace(
						/(?<!市辖区)(市|省|区|镇|街道|村|社区|委员会)(?!\s*(辖区|县|镇|乡))/g,
						'$&-' // 仅对非组合词添加连字符
					)
					.replace(/-$/, ''); // 移除末尾多余连字符
			},
			funcMap() {
				return this.enableStore.funcMap["sctxsh"]
			}
		},
		async onLoad(options) {
			try {
				await this.fetchProvinceData();
				if (this.provinces.length > 0) {
					await this.fetchCityData(this.provinces[0].code);
					if (this.cities.length > 0) {
						await this.fetchAreaData(this.cities[0].code);
					}
				}
				this.share.path =
					`/pageSubOne/common/user-info?id=${this.userInfo.id}&chatIdx=null&sourceType=0&fromThis=false&from=true`;
			} catch (error) {
				console.error("初始化数据请求错误:", error);
			}
			this.$http({
				url: "/share/myShareUser",
				method: 'GET',
			}).then(res => {
				this.myShareUser = res
			})
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;

		.head-image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 15rpx;
		}

		.signature {
			display: flex;
			padding: 24rpx 32rpx;
			flex-direction: column;
			gap: 16rpx;
			background-color: $white;

			.signature-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.item-left {
					color: $gray-400;
				}

				.item-right {
					display: flex;
					align-items: center;
					vertical-align: middle;
					gap: 16rpx;
				}
			}

			.signature-bottom {
				word-break: break-word;
				color: $gray-600;
			}
		}

		.content-item:nth-child(1),
		.content-item:nth-child(5) {
			margin-bottom: 10px;
		}

		.content-item {
			background-color: $white;
			padding: 28rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			vertical-align: middle;

			.item-left {
				color: $gray-500;
			}

			.item-right {
				display: flex;
				align-items: center;
				vertical-align: middle;
				gap: 16rpx;

				.right-content {
					color: $gray-900;
				}

				// .picker {
				// 	color: #9e9e9e;
				// 	font-size: 30rpx;
				// }

				.code {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>